<template>
	<div class="container-fluid">
		<div class="panel">
			<div class="panel-body text-center">
				<el-carousel indicator-position="outside">
					<el-carousel-item v-for="item in carousels" :key="item.id">
						<img :src="item.image"  height="100%">
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="panel">
			<div class="panel-heading">
				<el-row :gutter="20">
					<el-col :span="18">
						<div class="grid-content bg-purple">
							<h3 class="panel-title">Banner 列表</h3>
						</div>
					</el-col>
					<!-- 添加Banner -->
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-button type="primary" icon="el-icon-plus" class="pull-right" plain @click="createBanner">添加</el-button>
						</div>
					</el-col>


					<!-- 添加Banner New -->
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-dialog title="添加" :visible.sync="createNew" width="30%" :before-close="handleCloseNew">
								<el-form :model="Params" ref="createForm">
									<el-form-item>
										<!-- 1倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="TjfileSuccess1x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-remove="TianJiaRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="CreatefileImageList1x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸375*667,不超过10MB</div>
										</el-upload>
									</el-form-item>
									<el-form-item>
										<!-- 2倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="TjfileSuccess2x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-remove="TianJiaRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="CreatefileImageList2x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸750*1334,不超过10MB</div>
										</el-upload>
									</el-form-item>
									<el-form-item>
										<!-- 3倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="TjfileSuccess3x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-remove="TianJiaRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="CreatefileImageList3x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸1242*2208,不超过10MB</div>
										</el-upload>
									</el-form-item>
									
									<el-form-item label="跳转URL" prop="code">
										<el-input v-model="Params.url" auto-complete="off" placeholder="请输入Banner跳转URL"></el-input>
									</el-form-item>
									<el-form-item label="排序" prop="type">
										<el-input-number v-model="Params.number" :step="1"></el-input-number>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="createNew = false">取 消</el-button>
									<el-button type="primary" @click="submitCreateForm">确 定</el-button>
								</div>
							</el-dialog>
						</div>
					</el-col>

					<!-- 修改Banner New -->
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-dialog title="修改Banner" :visible.sync="updateNew" width="30%" :before-close="handleCloseNew">
								<el-form :model="Params" ref="createForm">
									<el-form-item>
										<!-- 1倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="fileSuccess1x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="fileImageList1x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸375*667,不超过10MB</div>
										</el-upload>
									</el-form-item>
									<el-form-item>
										<!-- 2倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="fileSuccess2x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="fileImageList2x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸750*1334,不超过10MB</div>
										</el-upload>
									</el-form-item>
									<el-form-item>
										<!-- 3倍图 -->
										<el-upload
										  class="upload-demo"
										  action="/api/imageUpload"
										  :on-success="fileSuccess3x"
										  :headers="myHeaders"
										  :limit="1"
										  :before-upload="fileQian"
										  :before-remove="UpdateHandleEditRemove"
										  :on-exceed="handleExceed_edit"
										  :file-list="fileImageList3x"
										  list-type="picture">
										  <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button>
										  <div slot="tip" class="el-upload__tip">尺寸1242*2208,不超过10MB</div>
										</el-upload>
									</el-form-item>
									
									<el-form-item label="跳转URL" prop="code">
										<el-input v-model="Params.url" auto-complete="off" placeholder="请输入Banner跳转URL"></el-input>
									</el-form-item>
									<el-form-item label="排序" prop="type">
										<el-input-number v-model="Params.number" :step="1"></el-input-number>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="updateNew = false">取 消</el-button>
									<el-button type="primary" @click="submitUpdateForm">确 定</el-button>
								</div>
							</el-dialog>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="panel-body">
				<el-table :data="carousels" style="width: 100%" v-loading="loading">
					<el-table-column prop="url" label="跳转地址"></el-table-column>
					<el-table-column prop="number" label="排序"></el-table-column>
					<el-table-column prop="created_at" label="创建时间"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<!-- <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button> -->
							<el-button size="mini" icon="el-icon-edit" @click="handleEditNew(scope.$index, scope.row)"></el-button>
							<el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)"  icon="el-icon-close"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import api from '../apis'
	import store from '../store'

	export default {
		name: "system-banner",
		data () {
			return {
				myHeaders: {Authorization: `Bearer ${store.state.account.access_token}`},
				loading: false,
				tishi: '',
				updateNew: false,

				createNew: false,
				carousels: [],

				// 创建默认显示图片
				CreatefileImageList1x: [],
				// 创建默认显示图片
				CreatefileImageList2x: [],

				// 创建默认显示图片
				CreatefileImageList3x: [],


				// 修改默认显示图片1@x
				fileImageList1x: [],
				// 修改默认显示图片2@x
				fileImageList2x: [],
				// 修改默认显示图片3@x
				fileImageList3x: [],
				Params: {
					url: '',
					image: '',
					image2x: '',
					image3x: '',
					number: '',
				},
				id: '',
				errorStr: '请上传图片,原图、2倍图、3倍图。合计三张图片'
			}
		},
		methods: {
			handleExceed_edit(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			/**
			 * 获取轮播图数据集合
			 */
			fetchBanners () {
				this.loading = true;
				api.banner.fetch(this.queryParams).then(response => {
					this.carousels = response.data;
					this.loading = false;
				});
			},
			/**
			 * 清空数据
			 */
			qingKong () {
				this.Params.url = '';
				this.Params.image = '';
				this.Params.image2x = '';
				this.Params.image3x = '';
				this.Params.number = '';
				this.fileImageList = [];

				this.fileImageList1x = [];
				this.fileImageList2x = [];
				this.fileImageList3x = [];
				this.CreatefileImageList1x = [];
				this.CreatefileImageList2x = [];
				this.CreatefileImageList3x = [];
			},
			/**
			 * 显示创建框
			 */
			createBanner () {
				// this.qingKong();
				this.createNew = true;
			},
			/**
			 * 关闭窗口
			 */
			handleCloseNew () {
				this.createNew = false;
				this.updateNew = false;
				this.qingKong();
			},
			/**
			 * 图片上传前
			 */
			fileQian (file) {
				if(file.size > 20971520){
					this.$message({
						duration: 6000,
						message: '文件上传内容不能查过10MB,当前上传文件'+Math.ceil(file.size/1024/1024)+'MB',
						type: 'warning'
					});
					return false;
				}
			},
			/**
			 * 上传成功返回
			 */
			fileSuccess (response, file, fileList) {
				let url = response.url;
				if(this.Params.image == '' || this.Params.image == 'null' || this.Params.image == undefined){
					this.Params.image = url;
				}else if(this.Params.image2x == ''  || this.Params.image2x == 'null' || this.Params.image2x == undefined){
					this.Params.image2x = url;
				}else if(this.Params.image3x == '' || this.Params.image3x == 'null' || this.Params.image3x == undefined){
					this.Params.image3x = url;
				}
			},

			/**
			 * 上传成功返回
			 */
			fileSuccess1x (response, file) {
				this.fileImageList1x = this.shuJuZhuHe(response.url);
			},
			/**
			 * 上传成功返回
			 */
			fileSuccess2x (response, file) {
				this.fileImageList2x = this.shuJuZhuHe(response.url);
			},
			/**
			 * 上传成功返回
			 */
			fileSuccess3x (response, file) {
				this.fileImageList3x = this.shuJuZhuHe(response.url);
			},

			/**
			 * 添加-上传成功返回
			 */
			TjfileSuccess1x (response, file) {
				this.CreatefileImageList1x = this.shuJuZhuHe(response.url);
			},
			/**
			 * 添加-上传成功返回
			 */
			TjfileSuccess2x (response, file) {
				this.CreatefileImageList2x = this.shuJuZhuHe(response.url);
			},
			/**
			 * 添加-上传成功返回
			 */
			TjfileSuccess3x (response, file) {
				this.CreatefileImageList3x = this.shuJuZhuHe(response.url);
			},
			/**
			 * 添加-上传成功返回
			 */
			TianJiaRemove (file, fileList){
				this.removeImage({path:file.url})
			},
			/**
			 * 获取文件名称
			 */
			fileWenJianMing (str){
				if(str != "" && str != undefined && str != 'null')
				return str.substring(str.lastIndexOf("/") + 1)
			},
			/**
			 * 删除回调清空数据
			 */
			qingKongImage (path) {
				if(this.Params.image == path){
					this.Params.image = '';
					delete(this.fileImageList[0]);
				}else if(this.Params.image2x == path){
					this.Params.image2x = '';
					delete(this.fileImageList[1]);
				}else if(this.Params.image3x == path){
					this.Params.image3x = '';
					delete(this.fileImageList[2]);
				}
			},
			/**
			 * 添加删除回调事件
			 */
			handleRemove (file, fileList) {
				let params = {
					path: file.response.url
				};
				this.removeImage(params);
			},
			/**
			 * 添加删除回调事件
			 */
			UpdateHandleRemove (file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`)
				.then(() => {
		          this.$message({
		            type: 'success',
		            message: '删除成功!'
		          });
		          	let params = {
						path: file.url
					};
					this.removeImage(params);
		        }).catch(() => {

		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });
		        });
			},
			UpdateHandleEditRemove (file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			
			/**
			 * 删除图片提交
			 */
			removeImage (params) {
				api.banner.deleteImage(params).then(response => {
					if (response.data.message == "删除成功") {
						// this.qingKongImage(response.data.path);
					}else{
						this.$message.error('网络异常,请稍后再试');
					}
				})
			},
			/**
			 * 创建轮播图
			 */
			submitCreateForm () {
				if(this.CreatefileImageList1x.length > 0){
					this.Params.image = this.CreatefileImageList1x[0].url;
				}else{
					this.Params.image = '';
				}

				if(this.CreatefileImageList2x.length > 0){
					this.Params.image2x = this.CreatefileImageList2x[0].url;
				}else{
					this.Params.image2x = '';
				}

				if(this.CreatefileImageList3x.length > 0){
					this.Params.image3x = this.CreatefileImageList3x[0].url;
				}else{
					this.Params.image3x = '';
				}
				if(this.is_tu_pain()){
					api.banner.store(this.Params).then(response => {
						this.createNew = false;
						this.fetchBanners();
						this.$message.success('创建成功');
						this.qingKong();
					})
				}else{
					this.$message.error(this.errorStr);
				}
			},
			/**
			 * 数据组合
			 */
			shuJuZhuHe(fielUrl){
				var file = [];
				file.push({
					name: this.fileWenJianMing(fielUrl),
					url: fielUrl
				});
				return file;
			},
			/**
			 * 修改显示
			 */
			handleEditNew (index, row) {
				this.qingKong();

				this.updateNew = true;
				this.Params.url = row.url;
				this.Params.image = row.image;
				this.Params.image2x = row.image2x;
				this.Params.image3x = row.image3x;
				this.Params.number = row.number;
				this.id = row.id;
				if(row.image != '' && row.image != undefined && row.image != null){
					this.fileImageList1x = this.shuJuZhuHe(row.image);
				}

				if(row.image2x != '' && row.image2x != undefined && row.image2x != null){
					this.fileImageList2x = this.shuJuZhuHe(row.image2x);
				}

				if(row.image3x != '' && row.image3x != undefined && row.image3x != null){
					this.fileImageList3x = this.shuJuZhuHe(row.image3x);
				}
			},
			/**
			 * 验证图片是否为空
			 */
			is_tu_pain () {
				if (this.Params.image !== undefined
					&& this.Params.image2x !== undefined
					&& this.Params.image3x !== undefined
					&& this.Params.image !== ''
					&& this.Params.image2x !== ''
					&& this.Params.image3x !== '') {
					return true;
				}
				return false;
			},
			/**
			 * 修改提交
			 */
			submitUpdateForm () {
				if(this.fileImageList1x.length > 0){
					this.Params.image = this.fileImageList1x[0].url;
				}else{
					this.Params.image = '';
				}

				if(this.fileImageList2x.length > 0){
					this.Params.image2x = this.fileImageList2x[0].url;
				}else{
					this.Params.image2x = '';
				}

				if(this.fileImageList3x.length > 0){
					this.Params.image3x = this.fileImageList3x[0].url;
				}else{
					this.Params.image3x = '';
				}
				
				if(this.is_tu_pain()){
					api.banner.update(this.id, this.Params).then(response => {
						this.update = false;
						this.updateNew = false;
						this.fetchBanners();
						this.$message.success('修改成功');
						this.qingKong();
						this.id = ''
					})
				}else{
					this.$message.error(this.errorStr);
				}

			},
			/**
			 * 删除
			 */
			handleDelete (index, row) {
				this.$confirm('此操作将删除Banner信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					api.banner.destroy(row.id).then(() => {
						//遍历分类集合删除指定的ID的分类
						Vue.delete(this.carousels, index);
						this.$message.success('删除成功');
						this.fetchBanners();
					}).catch(errors => {
						this.$message.error(errors.response.data.error);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
		mounted () {
			/**
			 * 获取轮播图数据集合
			 */
			this.fetchBanners();
		}
	}
</script>

<style lang="scss">

</style>
